<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<title>-客服控制台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="../js/xt.js"></script>
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">

		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app1 {
				width: 60%;
				float: left;
				border: 1px solid gainsboro;
				border-radius: 10px;
				padding: 10px;
				margin-left: 20px;
			}
			
			.app2 {
				width: 35%;
				padding: 10px;
				float: right;
				margin-right: 20px;
				border: 1px solid gainsboro;
				border-radius: 10px;
			}
			
			.border-t-a {
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="app1">
				<h3 style="text-align: center;">客户服务</h3>
				<hr class="border-t-a">
				<el-form ref="form" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="主题：" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>

					<el-form-item label="对应客户：" prop="custname">
						<el-col :span="12">
							<el-form-item>
								<el-input v-model="form.custname" disabled></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="12">
							<el-form-item label="联系人：" prop="linId">
								<el-select v-model="form.linName" @change="handleSelect1">
									<el-option v-for="item in customertoman" :key="item.linId" :label="item.linName" :value="item.linId">
								</el-select>
								<el-form-item>
						</el-col>
						</el-form-item>

						<el-form-item>
							<el-col :span="8">
								<el-autocomplete class="inline-input" v-model="form.custname" :fetch-suggestions="querySearch" placeholder="请输入客户名字" :trigger-on-focus="false" @select="handleSelect">
									<template slot-scope="{ item }">
										<div class="name">{{ item.cus_name }}({{ item.cus_company }})</div>
									</template>
								</el-autocomplete>
							</el-col>
							<el-col class="line" :span="3" :offset="4">执行人：</el-col>
							<el-col :span="8">
								${username}
							</el-col>
						</el-form-item>

						<el-form-item label="接单日期：">
							<el-col :span="8">
								<el-form-item prop="date1">
									<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions1"></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col class="line" :span="3" :offset="4">花费时间：</el-col>
							<el-col :span="8">
								<el-select v-model="form.spendtime">
									<el-option label="1个小时" :value="1.0"></el-option>
									<el-option label="2个小时" :value="2.0"></el-option>
									<el-option label="3个小时" :value="3.0"></el-option>
									<el-option label="半个工作日" :value="12.0"></el-option>
									<el-option label="1个工作日" :value="24.0"></el-option>
									<el-option label="2个工作日" :value="48.0"></el-option>
									<el-option label="3个工作日以上" :value="49.0"></el-option>
								</el-select>
							</el-col>
						</el-form-item>

						<el-form-item label="服务类型:" prop="type">
							<el-radio-group v-model="form.type">
								<el-radio :label="406">答疑</el-radio>
								<el-radio :label="407">故障排序</el-radio>
								<el-radio :label="408">维修</el-radio>
								<el-radio :label="409">其他</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="服务方式:" prop="mode">
							<el-radio-group v-model="form.mode">
								<el-radio :label="410">传真</el-radio>
								<el-radio :label="411">电话</el-radio>
								<el-radio :label="412">上门</el-radio>
								<el-radio :label="413">邮寄</el-radio>
								<el-radio :label="414">其他</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="状态:" prop="state">
							<el-radio-group v-model="form.state">
								<el-radio :label="415">无需处理</el-radio>
								<el-radio :label="416">未处理</el-radio>
								<el-radio :label="417">处理中</el-radio>
								<el-radio :label="418">处理完成</el-radio>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="服务内容：" prop="content">
							<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="form.content"></el-input>
						</el-form-item>

						<el-form-item>
							<el-col :span="8"></el-col>
							<el-col :span="8">
								<el-button @click="resetForm('form')">重置</el-button>
								<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
							</el-col>
							<el-col :span="8"></el-col>
						</el-form-item>

				</el-form>
			</div>
			
			<div class="app2">
				<p><i class="fa fa-search m-r-5"></i>QA（问题和回答）</p>

				<el-row :gutter="20">
					<el-col :span="20">
						<el-input placeholder="请输入内容" v-model="input10" clearable>
							<el-button type="info" slot="append" @click="query">查询</el-button>
						</el-input>
					</el-col>

				</el-row>

				<p class="m-t-10">
					<a href="/getQAty" target="_parent" class="btn btn-d">QA内容维护</a>
				</p>
				<div style="width:100%; height:130px;overflow:auto;">

					<div id="qaserchview1" :style="mydiv1">
						<font color="#999999">QA全文检索注意事项：<br><b>1</b>.关键字不能太普遍，比如查询“的”，可能很多QA条目中都有这个字，自动过滤，不返回查询结果<br><b>2</b>.查询关键字可以多些，全文检索会拆分匹配<br><b>3</b>.QA表内的数据如少于3条，无法实现全文检索</font>
					</div>
					<div id="qaserchview2" :style="mydiv2">
						<p @click="queryMore(i)" v-for="(qa,i) in qas">
							<i class="fa  fa-circle text-gray m-r-5"></i>
							<a href="javascript:qaserchview_click_show('1');" class="text-black">{{qa.qa_name}}</a>
						</p>
			
					</div>

				</div>
				<div id="qashow" :style="mydiv3">
					<div class="bootstrap-table m-t-10">
						<div class="fixed-table-container">
							<table class="table table-bordered table-hover">
								<thead>
									<tr>
										<td class="th-inner" colspan="4">
											<a  class="btn btn-d btn-xs" @click="addMsg()">把该问题加入客服记录</a>
										</td>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td class="text-right">
											问题:
										</td>
										<td colspan="3">
											{{wenti}}
										</td>
									</tr>
									<tr>
										<td class="text-right">
											解答：
										</td>
										<td colspan="3">

											<p><b>{{jieda}}</b><br></p>
										</td>
									</tr>
									<tr>
										<td class="text-right">
											提示：
										</td>
										<td colspan="3">

										</td>
									</tr>
									<tr>
										<td style="width: 25%" class="text-right">
											使用次数：
										</td>
										<td style="width: 25%">
											{{count}}
										</td>
										<td style="width: 25%" class="text-right">
											分类：
										</td>
										<td style="width: 25%">
											{{type}}
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="4">
											<a  class="btn btn-d btn-xs" @click="addMsg()">把该问题加入客服记录</a>
											<p></p>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		
		
		
		</div>

		<script>
			var vms = new Vue({
				el: "#app",
				data() {
					return {
						customertoman: [],
						input10: '',
						pickerOptions1: { //时间做约束
							disabledDate(time) {
								return time.getTime() > Date.now() - 8.64e6;
							}
						},
						qas:[],
						wenti:"",
						jieda:'',
						count:'',
						type:'',
						qaid:'',
						form: {
							name: '',
							custname: '',
							custid: '',
							type: '',
							mode: '',
							date1: new Date(),
							date2: '',
							spendtime: '',
							linId: '',
							linName: '',
							state: '',
							user: '',
							content: '',
							back: '',
							more: '',
							id: '',
							restaurants: []
						},
						mydiv1: {
							display: 'block'
						},
						mydiv2: {
							display: 'none'
						},
						mydiv3: {
							display: 'none'
						},
						//验证规则
						rules: { //数据源model
							name: [{
								required: true,
								message: '请输入服务主题',
								trigger: 'blur'
							}, ],
							custname: [{
								required: true,
								message: '请选择客户',
								trigger: 'blur'
							}],
							state: [{
								required: true,
								message: '请选择目前状态',
								trigger: 'blur'
							}],
							linId: [{
								required: true,
								message: '请选择联系人',
								trigger: 'blur'
							}],
							date1: [{
								//type: 'date',
								required: true,
								message: '请选择时间',
								trigger: 'blur'
							}],
							date2: [{
								//type: 'date',
								required: true,
								message: '请选择时间',
								trigger: 'blur'
							}],
							user: [{
								required: true,
								message: '请选择执行人',
								trigger: 'blur'
							}],
							type: [{
								required: true,
								message: '请选择服务类型',
								trigger: 'blur'
							}],
							mode: [{
								required: true,
								message: '请选择服务方式',
								trigger: 'blur'
							}],
							content: [{
								required: true,
								message: '请输入服务的内容',
								trigger: 'blur'
							}],
							linId:[{
								required: true,
								message: '请选择联系人',
								trigger: 'change'
							}]
						}
					}
				},

				methods: {
					//queryString实时的文本框的值,cb回调函数
					querySearch: function(queryString, cb) {
						var allarr = this.form.restaurants;
						// console.info(allarr);

						var newsarr = [];
						allarr.forEach(v => {
							var strs = v.cus_name + "";
							if(strs.indexOf(queryString) >= 0) {
								newsarr.push(v);
							}
						})
						// 调用 callback 返回建议列表的数据
						cb(newsarr);
					},
					submitForm(formName) {
						var iossn = this;
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//post提交数据
								axios.post("/serviceform",
									//参数转换
									Qs.stringify(this.form, {
										arrayFormat: 'brackets'
									})

								).then(function(v) {
									if(v.data == true){
										window.parent.location.href = "/getServicety";
									}else{
										window.parent.parent.location.href = "/getErrorty";
									}

								}).catch(function(e) {
									alert("出错了" + e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});

					},
					resetForm(formName) {
						this.$refs[formName].resetFields();
					},
					handleSelect: function(it) {
						this.form.custname = it.cus_name;
						this.form.custid = it.cus_id;
						var iosnn = this;
						//post提交数据
						axios.post("/onSale/findByCoustomerName",
							//参数转换
							Qs.stringify({
								'custid': this.form.custid
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							iosnn.customertoman = v.data.custo;
							console.info(v.data);
						}).catch(function(e) {
							alert("出错了" + e);
						});

					},
					handleSelect1: function(it) {
						//	alert("ss");
						this.form.linId = it;
						console.log("我在选择联系人");
						console.log(this.form.linId);
					},
					query() {
						var isson = this;
						//post提交数据
						axios.post("/queryMesssageQa",
							//参数转换
							Qs.stringify({
								"msg": this.input10
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {
						isson.qas = v.data;
						console.log(v.data);
						isson.mydiv1.display = 'none';
						isson.mydiv2.display = 'block';
						isson.mydiv3.display = 'none';
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					queryMore(i){
						var news = this.qas[i];
						console.log(news);
						this.wenti = news.qa_name;
						this.jieda = news.qa_anwser;
						this.count = news.qa_count;
						this.type =  news.dic_name;
						this.qaid = news.qa_id;
						this.mydiv3.display = 'block';
					},
					addMsg(){
						this.form.name=this.form.name+this.wenti+",";
						this.form.content=this.form.content+this.jieda+",";
						var isson = this;
						axios.post("/addQaCount",
							//参数转换
							Qs.stringify({
								"qaid": this.qaid
							}, {
								arrayFormat: 'brackets'
							})

						).then(function(v) {
							console.log(v);
							isson.count = isson.count + 1;
						
						}).catch(function(e) {
							//alert("出错了" + e);
						});
						
						
					},
				},
				mounted() {
					var dic = ${
						dictionaryitem
					};
					//console.log(dic); 
					var mas = ${
						mansitem
					};
					this.form.restaurants = mas;

					//判断是否为第二次进入
					if(JSON.stringify(${
							service
						}) != '{}') {
						var news = ${
							service
						};
						this.form.custname = news.cus_name;
						this.form.custid = news.cus_id;
						this.handleSelect(news);
					}
				}
			});
		</script>
	</body>

</html>